//out: ../css/
@import "./base";

@vw:3.75vw;
header{
  height: (50 /@vw);
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 (15 /@vw);
  background-color: #fff;
  .left{
    background-image: url('../assets/head.png');
    width: (235 /@vw);
    height: (50/ @vw);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .right{  
    width: (80 /@vw);
    height: (30 /@vw);
    border-radius:(15 /@vw) ;
    font-size: (14 /@vw);
    background-color: #ffe31b;
    text-align: center;
    line-height: (30 /@vw);
  }
}
// 搜索
.search{
  width: (345 /@vw);
  height: (32/ @vw);
  text-align: center;
  line-height: (32 /@vw);
  background-color:#f2f3f5;
  border-radius: (16 /@vw);
  padding: 0 (15 /@vw);
 margin: (60/@vw) (10 /@vw) (15 /@vw);
 span{
  color: #a1a4b3;
  font-size: (14 /@vw);
  i{
    font-size: (16 /@vw);
  }
 }

}
// banner
.banner{
  img{
    width: (345 /@vw);
    height: (108 /@vw);
    border-radius: (5 /@vw);
    margin: 0 (15 /@vw);
  }
}

// 排行榜
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 (15 /@vw);
  margin-top: (15 /@vw);

  h5 {
    font-size: (20 /@vw);
  }

  p {
    color: #a1a4b3;
    font-size: (12 /@vw);
  }
}
.rank{
  
   li{
      width: (345 /@vw);
      height: (105 /@vw);
      margin-top: (15 /@vw);
      padding-left: (15 /@vw);
      display: flex;
      .pic{
        margin-right: (10/@vw);
        img {
            width: (105/@vw);
            height: (105/@vw);
            border-radius: (10/@vw);
          }
      }
      .txt{
        a{
          display: block;
          font-size: (12 /@vw);
          color: #a1a4b3;
          line-height:1.8;
    
        }
        .more{
          font-size: (14 /@vw);
          color: #333; 
        }
      }
   }
}

// 推荐歌单
.recommend{
  padding: 0 (15 /@vw);
 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: (15 /@vw);
  li{
    margin-bottom: (15 /@vw);
    width: (105 /@vw);
    height: (142 /@vw);
    .pic {
      position: relative;
        width: (105 / @vw);
        height: (105 / @vw);
      
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: (10 / @vw);
        }
      
        .cover {
          position: absolute;
          left: 0;
          bottom: 0;
          width: (70 / @vw);
          height: (28 / @vw);
          background-color: rgba(0, 0, 0, 0.8);
          border-radius: 0 (10 / @vw) 0 (10 / @vw);
          text-align: center;
          line-height: (28 / @vw);
          color: #fff;
          font-size: (14 / @vw);
      }
    }
    .txt{
      font-size: (14 /@vw);
    }
  }
 }
}
// 底部下载
.download{
  width: (345 /@vw);
  height: (45/ @vw);
  display: flex;
  position: fixed;
  bottom:(30/ @vw);
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: (22.5 /@vw);
  padding: 0 (10 /@vw);
  margin: 0 (15 /@vw);
  img{
    width: (36 /@vw);
    height: (36 /@vw);
  }
  p{
    display: block;
    margin-left: (-30 /@vw);
    text-align: center;
  }
  span{
    width: (32/@vw);
    height: (32/@vw);
    background-color: #f2f3f5;
    border-radius: 50%;
    text-align: center;
    line-height:(32/@vw) ;
  }
}